<template>
	<div>
		<ul>
			<TreeItem2 :model="treeData"></TreeItem2>
		</ul>
	</div>
</template>

<script setup>
	import {ref, reactive} from 'vue'
	import TreeItem2 from './TreeItem2.vue'
	const data = {
		name:'My Tree',
		children:[
			{
				name:'hello',
			},
			{
				name:'world',
			},
			{
				name: 'child folder',
				children: [
					{
						name:'hello',
					},
					{
						name:'world',
					},
					{
						name: 'child folder',
						children: [
							{
								name:'hello',
							},
							{
								name:'world',
							},
						]
						
					}
				]
			}
		]
	}
	// 多个根节点的情况，TreeItem作为一组li的渲染容器
	const treeData = reactive([data])
</script>

<style>
</style>